<template>
	<el-menu 
	style="min-height: calc(100vh - 70px);"
	:default-active="$route.path" 
	background-color="#000" 
	text-color="#FFFFFF" 
	active-text-color = "#409EFF"
	class="el-menu-vertical-demo"
	:collapse="isCollapse"
	router
	>
		<el-menu-item :index="item.path" v-for="item in menu" :key="item.path">
			<i :class="item.icon"></i>
			<span slot="title" >{{item.name}}</span>
		</el-menu-item>

	</el-menu>
</template>

<script>
	import {mapState} from 'vuex'
	import menu from './menu.js'
	export default{
		data(){
			return{
				menu: menu
			};
		},
		computed:{
			// isCollapse: this.$store.state.isCollapse
			// 如果有多个值可以全部引用，都逗号隔开
			...mapState(['isCollapse']),
		}
	}
</script>

<style>
	  .el-menu-vertical-demo:not(.el-menu--collapse) {
	    width: 200px;
	  }
</style>
